<template>
  <!-- <Teleport to=".app-main"> -->
    <transition name="side-page-down">
      <div class="cache-side-page-page side-page-warp">
        <div class="view-box-content">
          <div class="side-page-bar-wrapper">
            <div class="side-page-bar-info">
              <div class="side-page-back">
                <div class="side-page-back-content">
                  <el-icon size="18" @click="hide" class="side-page-back-icon">
                    <Back />
                  </el-icon>
                  <span class="side-page-back-title">返回</span>
                  <div class="line"></div>
                </div>
                <span class="side-page-title">{{ title }}</span>
              </div>

              <!-- <el-button type="default" icon="ios-undo" @click="close"></el-button> -->
              <div class="side-bar-buttons" v-if="isActionTop  && actions.length">
                <el-button
                  @click="item.handle()"
                  :loading="item.loading"
                  v-for="(item, index) in actions"
                  :key="index"
                  :type="item.theme"
                  :icon="item.icon"
                  :disabled="item.disabled || false"
                  >{{ item.text }}</el-button
                >
              </div>
            </div>
          </div>
          <div class="side-page-con">
            <slot :setTitle="setTitle"></slot>
          </div>
          <div v-if="!isActionTop && actions.length" class="side-page-bottom">
            <!-- <div class="line"></div> -->
            <div class="side-page-bottom-action">
              <el-button
                @click="item.handle()"
                :loading="item.loading"
                v-for="(item, index) in actions"
                :key="index"
                :type="item.theme"
                :icon="item.icon"
                :disabled="item.disabled || false"
                >{{ item.text }}</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </transition>
  <!-- </Teleport> -->
</template>

<script setup name="subPageContainer">
import { toRefs,onMounted } from "vue";
import { Back } from "@element-plus/icons-vue";
const props = defineProps(["title", "actions", "isActionTop"]);
const { title, actions, isActionTop } = toRefs(props);

const showPage = defineModel("show");
const emit = defineEmits(["close"]);
const hide = () => {
  showPage.value = false;
  emit("close");
};
const open = () => {
  showPage.value = true;
};
function setTitle(val) {
  title.value = val;
}
const close = () => {
  emitter.off("closeSubPage");
  render(null, container);
  callBack();
};

defineExpose({
  open,
  hide,
  close,
});

onMounted(() => {
  const singleWrapper = document.querySelector(".single-wrapper");
  if (singleWrapper) {
    const singleWrapperChildren = singleWrapper.children;
    if (singleWrapperChildren && singleWrapperChildren[0]) {
      singleWrapperChildren[0].style.setProperty("display", "none");
    }
  }
});
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.module.scss";
.side-page-bar-wrapper {
  .side-page-back {
    margin-right: 14px;
    display: flex;
    &-content {
      display: flex;
      align-items: center;
    }
    &-title {
      padding-left: 12px;
      margin-left: 0;
      font-weight: 400;
    }
    .line {
      width: 1px;
      height: 20px;
      background: #d8d8d8;
      margin: 0 16px;
    }
    &-icon {
      display: inline-block;
      width: 24px;
      height: 24px;
      padding: 3px;
      border-radius: 50%;
      background: #ffffff;
      font-weight: bold;
      // line-height: 24px;
      cursor: pointer;
      box-shadow: 1px 1px 6px 0px rgba(229, 233, 238, 0.8);
      &:hover {
        color: $--color-primary;
        box-shadow: 1px 1px 10px 0px rgba(12, 28, 47, 0.25);
      }
    }
  }

  .side-page-title {
    margin-left: 0;
    font-weight: 400;
  }
}
.side-page-bottom {
  .line {
    height: 10px;
    width: 100%;
    background: #f4f6fd;
  }
  &-action {
    width: 100%;
    height: 56px;
    background: #ffffff;
    box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0px 0px 8px 8px;
    text-align: center;
    line-height: 56px;
  }
}

.side-page-warp {
  position: absolute;
  background-color: #fff;
  z-index: 1000;
  transition: all 0.32s cubic-bezier(0.36, 0.66, 0.04, 1);
  height: 100% !important;
  width: 100%;
  left: 0;
  top: 0;
  .view-box-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .side-page-con {
    height: 100%;
    overflow: auto;
    flex: 1;
  }
}

.side-page-warp-full:extend(.side-page-warp) {
  top: 0;
}

.side-page-bar-wrapper {
  width: 100%;
  padding: 0px 12px;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
  //   background-color: #f9f9f9;
  z-index: 9;
  .side-page-bar-buttons {
    position: absolute;
    right: 8px;
    top: 13px;

    button {
      margin-right: 5px;
    }
  }

  .side-page-bar-info {
    // position: absolute;
    // top: 0;
    height: 54px;
    display: flex;
    align-items: center;

    .button {
      border-color: #f1f1f1;
    }
    span {
      font-size: 16px;
      color: #333;
      margin-left: 6px;
      vertical-align: middle;
      font-weight: bold;
    }

    .side-page-back-icon {
      font-size: 18px;
      color: #666;
      cursor: pointer;
      text-align: center;
    }
  }
}

.side-page-bar-wrapper .side-page-bar-info .el-btn:hover i {
  color: $--color-primary;
}

/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/

.side-page-down-enter-active {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.side-page-down-leave-active {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.side-page-down-enter-active {
  animation-name: pageIn;
  animation-play-state: running;
}
.side-page-down-leave-active {
  animation-name: pageOut;
  animation-play-state: running;
}

.side-page-down-enter-active {
  opacity: 0;
  animation-timing-function: linear;
  animation-duration: 0.2s;
}
.side-page-down-leave-active {
  animation-timing-function: linear;
  animation-duration: 0.2s;
}

@keyframes pageIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes pageOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
}
</style>
